import React, { Component } from "react";
import { Card, Form, Input, Button } from "antd";

@Form.create({
  mapPropsToFields: props => ({
    phone: Form.createFormField({
      value: props.data.customMobile
    }),
    email: Form.createFormField({
      value: props.data.customEmail
    })
  })
})
class EditNumber extends Component {
  constructor(props) {
    super(props);
    this.state = {
      emailEnable: false,
      phoneEnable: false
    };
  }

  // 修改邮箱
  handleEmail = () => {
    this.setState({
      emailEnable: true // 邮箱允许输入
    });
  };

  handleEmailDis = (e, type) => {
    const { form, data } = this.props;
    if (type === "cancer") {
      form.setFieldsValue({
        email: data.customEmail
      });
      this.setState({
        emailEnable: false // 邮箱允许输入
      });
    }

    if (type === "save") {
      form.validateFields(["email"]).then(res => {
        if (!res.errors) {
          this.props.change({ customEmail: form.getFieldValue("email") });
          this.setState({
            emailEnable: false // 邮箱允许输入
          });
        }
      });
    }
  };

  // 修改手机号
  handlePhone = () => {
    this.setState({
      phoneEnable: true // 手机号允许输入
    });
  };

  handlePhoneDis = (e, type) => {
    const { form, data } = this.props;
    if (type === "cancer") {
      form.setFieldsValue({
        phone: data.customMobile
      });
      this.setState({
        phoneEnable: false // 手机号允许输入
      });
    }

    if (type === "save") {
      form.validateFields(["phone"]).then(res => {
        if (!res.errors) {
          this.props.change({ customMobile: form.getFieldValue("phone") });
          this.setState({
            phoneEnable: false // 手机号允许输入
          });
        }
      });
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { emailEnable, phoneEnable } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

    return (
      <Card title="渠道号管理">
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <Form.Item label=" 手机号码：">
            <div style={{ display: "flex", flexDirection: "row" }}>
              {getFieldDecorator("phone", {
                rules: [
                  {
                    required: true,
                    // validator: (rule, value, callback) => {
                    //   console.log(rule);
                    //   return /^1(3|4|5|6|7|8|9)\d{9}$/.test(value)
                    //     ? callback("success")
                    //     : callback("error");
                    // },
                    pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                    message: "请输入正确的手机号码"
                  }
                ]
              })(
                <Input
                  style={{ width: 466, marginLeft: 8 }}
                  placeholder="请输入手机号码"
                  disabled={!phoneEnable}
                />
              )}
              {!phoneEnable ? (
                <Button
                  type="link"
                  style={{ paddingLeft: 11 }}
                  onClick={this.handlePhone}
                >
                  修改
                </Button>
              ) : (
                <div style={{ flexDirection: "row" }}>
                  <Button
                    type="link"
                    style={{ paddingLeft: 11 }}
                    onClick={e => this.handlePhoneDis(e, "save")}
                  >
                    保存
                  </Button>
                  <Button
                    type="link"
                    style={{ paddingLeft: 11 }}
                    onClick={e => this.handlePhoneDis(e, "cancer")}
                  >
                    取消
                  </Button>
                </div>
              )}
            </div>
          </Form.Item>
          <Form.Item label=" 邮箱：">
            <div style={{ display: "flex", flexDirection: "row" }}>
              {getFieldDecorator("email", {
                rules: [
                  {
                    required: true,
                    type: "email",
                    message: "请输入正确的邮箱"
                  }
                ]
              })(
                <Input
                  style={{ width: 466, marginLeft: 8 }}
                  placeholder="请输入邮箱"
                  disabled={!emailEnable}
                />
              )}
              {!emailEnable ? (
                <Button
                  type="link"
                  style={{ paddingLeft: 11 }}
                  onClick={this.handleEmail}
                >
                  修改
                </Button>
              ) : (
                <div style={{ flexDirection: "row" }}>
                  <Button
                    type="link"
                    style={{ paddingLeft: 11 }}
                    onClick={e => this.handleEmailDis(e, "save")}
                  >
                    保存
                  </Button>
                  <Button
                    type="link"
                    style={{ paddingLeft: 11 }}
                    onClick={e => this.handleEmailDis(e, "cancer")}
                  >
                    取消
                  </Button>
                </div>
              )}
            </div>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}

export default EditNumber;
